<script lang="ts" setup>
	import { ref } from "vue";
	import { theme } from '@/store/module/theme'

	// 个人信息
	const userInfo = ref([
		{
			title: "头像",
			url: "dsfsdf",
		},
		{
			title: "昵称",
			value: "linhan",
		},

		{
			title: "性别",
			value: "男",
		},

		{
			title: "年龄",
			value: "23",
		},
		{
			title: "星座",
			value: "天蝎",
		},
		{
			title: "生日",
			value: "2001-10-08",
		},
		{
			title: "爱好",
			value: "唱歌、美食、旅行等",
		},
		{
			title: "座右铭",
			value: "不做圣经里腐朽的诗篇，我要做禁书里最华丽的那一章",
		},
	]);
</script>

<template>
	<view :class="theme()" class="w-full min-h-[100vh]" :style="{background:'var(--Gradient-color)'}">
		<template v-for="(i,idx) in userInfo " :key="idx">
			<u-cell :rightIconStyle="{
							color:'var(--text-color)'
						}" arrow-direction="right" isLink clickable>
				<template #title>
					<view class=" text-[var(--text-color)] text-[16px] font-bold">
						{{i.title}}
					</view>
				</template>
				<template #value>
					<view v-if="i.url" class="w-[80rpx] h-[80rpx] mr-[20rpx] overflow-hidden rounded-[16rpx]">
						<image
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc5f6153c-589f-4b46-a371-705652eeb8ec%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707988800&t=f31af2fe85d5b4be4a23c06721935851"
							class="w-full h-full " mode=""></image>
					</view>
					<view v-if="i.value"
						class="w-[60%] text-[14px] truncate text-end mr-[20rpx] text-[var(--text-color)]">
						{{i.value}}
					</view>
				</template>
			</u-cell>
		</template>
	</view>
</template>